<template>
  <div class="admin-layout">
    <!-- 侧边栏 -->
    <aside class="sidebar" :class="{ collapsed: isCollapsed }">
      <div class="sidebar-header">
        <div class="logo">
          <img src="/vite.svg" alt="Logo" class="logo-icon">
          <span v-show="!isCollapsed" class="logo-text">Base Admin</span>
        </div>
        <button @click="toggleSidebar" class="toggle-btn">
          <svg class="toggle-icon" viewBox="0 0 24 24">
            <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
          </svg>
        </button>
      </div>
      
      <nav class="sidebar-nav">
        <ul class="menu-list">
          <li class="menu-item" v-for="item in menuItems" :key="item.path">
            <router-link 
              :to="item.path" 
              class="menu-link"
              :class="{ active: $route.path === item.path }"
            >
              <span class="menu-icon" v-html="item.icon"></span>
              <span v-show="!isCollapsed" class="menu-text">{{ item.title }}</span>
            </router-link>
          </li>
        </ul>
      </nav>
    </aside>

    <!-- 主内容区域 -->
    <div class="main-container">
      <!-- 顶部导航栏 -->
      <header class="main-header">
        <div class="header-left">
          <h1 class="page-title">{{ pageTitle }}</h1>
        </div>
        <div class="header-right">
          <div class="user-info">
            <span class="username">{{ userStore.username || '管理员' }}</span>
            <div class="user-dropdown" @click="toggleDropdown">
              <div class="avatar">
                <svg viewBox="0 0 24 24">
                  <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
                </svg>
              </div>
              <div v-show="showDropdown" class="dropdown-menu">
                <div class="dropdown-item" @click="handleLogout">
                  <svg viewBox="0 0 24 24" class="logout-icon">
                    <path d="M16,17V14H9V10H16V7L21,12L16,17M14,2A2,2 0 0,1 16,4V6H14V4H5V20H14V18H16V20A2,2 0 0,1 14,22H5A2,2 0 0,1 3,20V4A2,2 0 0,1 5,2H14Z"/>
                  </svg>
                  退出登录
                </div>
              </div>
            </div>
          </div>
        </div>
      </header>

      <!-- 标签页内容 -->
      <main class="main-content">
        <TabsView />
      </main>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useTabsStore } from '../stores/tabs'
import { useUserStore } from '../stores/user'
import TabsView from '../components/TabsView.vue'

const route = useRoute()
const router = useRouter()
const tabsStore = useTabsStore()
const userStore = useUserStore()
const isCollapsed = ref(false)
const showDropdown = ref(false)

// 监听路由变化，自动添加标签页并更新活跃状态
watch(() => route.path, (newPath) => {
  if (newPath && route.name) {
    tabsStore.addTab({
      path: newPath,
      name: route.name
    })
    tabsStore.setActiveTab(newPath)
  }
}, { immediate: true })

const menuItems = [
  {
    path: '/dashboard',
    title: '仪表盘',
    icon: '<svg viewBox="0 0 24 24"><path d="M13 3v6h8V3m-8 18h8V11h-8M3 21h8v-6H3m0-2h8V3H3v10Z"/></svg>'
  },
  {
    path: '/users',
    title: '用户管理',
    icon: '<svg viewBox="0 0 24 24"><path d="M16 4c0-1.11.89-2 2-2s2 .89 2 2-.89 2-2 2-2-.89-2-2M4 18v-1c0-1.28.84-2.5 2.14-2.74L9.5 14.5c.28-.1.58-.14.9-.14H17v4H4Z"/></svg>'
  },
  {
    path: '/products',
    title: '商品管理',
    icon: '<svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2Z"/></svg>'
  },
  {
    path: '/orders',
    title: '订单管理',
    icon: '<svg viewBox="0 0 24 24"><path d="M7 4V2C7 1.45 7.45 1 8 1H16C16.55 1 17 1.45 17 2V4H20C20.55 4 21 4.45 21 5S20.55 6 20 6H19V19C19 20.1 18.1 21 17 21H7C5.9 21 5 20.1 5 19V6H4C3.45 6 3 5.55 3 5S3.45 4 4 4H7Z"/></svg>'
  },
  {
    path: '/settings',
    title: '系统设置',
    icon: '<svg viewBox="0 0 24 24"><path d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.22,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.22,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.68 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z"/></svg>'
  },
  {
    path: '/buttons-demo',
    title: '按钮演示',
    icon: '<svg viewBox="0 0 24 24"><path d="M12 2a2 2 0 0 1 2 2v4h4a2 2 0 1 1 0 4h-4v4a2 2 0 1 1-4 0v-4H6a2 2 0 1 1 0-4h4V4a2 2 0 0 1 2-2Z"/></svg>'
  },
  {
    path: '/express-stage',
    title: '驿站配置',
    icon: '<svg viewBox="0 0 24 24"><path d="M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9V7L15 4L12 5.5L9 4L3 7V9H4V20H7V12H11V20H18V9H21ZM16 18H13V10H9V18H6V8.5L9 6.75L12 8.25L15 6.75L18 8.5V18H16Z"/></svg>'
  },
  {
    path: '/package-config',
    title: '包裹配置',
    icon: '<svg viewBox="0 0 24 24"><path d="M12,2A2,2 0 0,1 14,4A2,2 0 0,1 12,6A2,2 0 0,1 10,4A2,2 0 0,1 12,2M21,9V7L15,4L12,5.5L9,4L3,7V9H4V20H7V12H11V20H13V12H17V20H20V9H21M16,18H14V10H12V18H8V8.5L12,6.5L16,8.5V18Z"/></svg>'
  }
]

const pageTitle = computed(() => {
  const currentItem = menuItems.find(item => item.path === route.path)
  return currentItem ? currentItem.title : '仪表盘'
})

const toggleSidebar = () => {
  isCollapsed.value = !isCollapsed.value
}

const toggleDropdown = () => {
  showDropdown.value = !showDropdown.value
}

const handleLogout = () => {
  showDropdown.value = false
  userStore.logout()
}

// 点击外部关闭下拉菜单
const handleClickOutside = (event) => {
  if (!event.target.closest('.user-dropdown')) {
    showDropdown.value = false
  }
}

onMounted(() => {
  document.addEventListener('click', handleClickOutside)
})

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside)
})
</script>

<style scoped>
.admin-layout {
  display: flex;
  height: 100vh;
  background: #f0f2f5;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* 侧边栏样式 */
.sidebar {
  width: 220px;
  background: linear-gradient(180deg, #243145 0%, #1b2433 100%);
  color: #e5e7eb;
  transition: width 0.3s ease;
  flex-shrink: 0;
  box-shadow: 2px 0 14px rgba(0, 0, 0, 0.25);
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 100;
}

.sidebar.collapsed {
  width: 64px;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.08));
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-icon {
  width: 32px;
  height: 32px;
}

.logo-text {
  font-size: 18px;
  font-weight: 700;
  color: #f3f4f6;
  letter-spacing: 0.2px;
}

.toggle-btn {
  background: none;
  border: none;
  color: #9aa4b2;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  transition: all 0.25s ease;
}

.toggle-btn:hover {
  color: #e5e7eb;
  background: rgba(148, 163, 184, 0.15);
}

.toggle-icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* 菜单样式 */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
}

.menu-list {
  list-style: none;
  padding: 20px 0;
  margin: 0;
}

.menu-item {
  margin: 2px 12px;
}

.menu-link {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  color: #c7d2fe;
  text-decoration: none;
  transition: all 0.25s ease;
  gap: 12px;
  border-radius: 10px;
  position: relative;
  background: transparent;
  backdrop-filter: saturate(110%);
}

.menu-link:hover {
  background: rgba(99, 102, 241, 0.08);
  color: #e0e7ff;
  transform: translateX(2px);
}

.menu-link.active {
  background: linear-gradient(135deg, #4f46e5 0%, #2563eb 100%);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
  transform: translateX(2px);
}

.menu-link .menu-icon svg {
  color: #a5b4fc;
  transition: color 0.25s ease;
}
.menu-link .menu-icon svg path {
  fill: currentColor;
  transition: fill 0.25s ease;
}
.menu-link:hover .menu-icon svg {
  color: #c7d2fe;
}
.menu-link.active .menu-icon svg {
  color: #ffffff;
}

.menu-link.active::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 22px;
  background: #ffffff;
  border-radius: 2px;
}

.menu-link.active::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid rgba(255,255,255,0.35);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.menu-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.menu-icon svg {
  width: 20px;
  height: 20px;
  color: #94a3b8; /* 默认更柔和 */
}

.menu-text {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: 0.3px;
}

/* 主内容区域 */
.main-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.main-header {
  background: white;
  padding: 0 24px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e8e8e8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  margin: 0;
  flex-shrink: 0;
}

.page-title {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0;
  letter-spacing: 0.3px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.username {
  font-size: 14px;
  color: #7f8c8d;
  font-weight: 500;
}

.user-dropdown {
  position: relative;
  cursor: pointer;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(52, 152, 219, 0.3);
}

.avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
}

.avatar svg {
  width: 18px;
  height: 18px;
  fill: white;
}

.dropdown-menu {
  position: absolute;
  top: 40px;
  right: 0;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 120px;
  z-index: 1000;
  border: 1px solid #e8e8e8;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.dropdown-item:hover {
  background-color: #f5f5f5;
}

.dropdown-item:first-child {
  border-radius: 8px 8px 0 0;
}

.dropdown-item:last-child {
  border-radius: 0 0 8px 8px;
}

.logout-icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.main-content {
  flex: 1;
  overflow: hidden;
  background: #f0f2f5;
  margin: 0;
  padding: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    height: 100vh;
  }
  
  .sidebar.collapsed {
    left: -260px;
  }
  
  .main-container {
    margin: 0;
    padding: 0;
  }
  
  .admin-layout {
    margin: 0;
    padding: 0;
  }
}
</style> 